<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>我是主标题</title>
  </head>
  <body>
    <div id="container">
      <video autoplay muted loop src="../public/video.mp4" id="video"></video>
      <div id="cover">
        <div id="button">
          <span id="clock">15秒</span>
          <span>后点击跳过</span>
        </div>
        <div id="titles">
          <a href="#" onclick="jumpTo('http://www.baidu.com', '10')">
            <p id="main">我是主标题</p>
            <p id="sub">
              我是一条好长好长好长好长好长好长好长好长好长好长好长好长好长好长好长好长好长好长的副标题
            </p>
          </a>
        </div>
      </div>
    </div>
    <script>
      // 动态调整元素大小
      var changeVideoSize = function changeVideoSize() {
        var width = window.innerWidth;
        var height = window.innerHeight;

        // 默认为 24 px
        var fontSize = 24;

        var video = document.getElementById("video");
        var html = document.getElementsByTagName("html")[0];

        if (width > (height * 16) / 9) {
          width = (height * 16) / 9;
        } else {
          height = (width * 9) / 16;
        }

        fontSize = (fontSize * width) / 1280;
        video.style.height = height + "px";
        video.style.width = width + "px";
        html.style.fontSize = fontSize + "px";
      };

      window.onresize = changeVideoSize;
      changeVideoSize();
    </script>
  </body>
</html>
